<template>
    <div>
        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <!--:data="currentData"=========》表格所用的总数据-->
                    <el-table
                            :header-cell-style="header_style"
                            :cell-style="cell_style"
                            :data="currentData"
                            border
                            style="width: 100%;text-align: center;">

                        <el-table-column
                                prop="v_id"
                                label="工号">
                        </el-table-column>
                        <el-table-column
                                prop="v_name"
                                label="姓名">
                        </el-table-column>
                        <el-table-column
                                prop="v_src"
                                label="头像">
                        </el-table-column>
                        <el-table-column
                                prop="v_sex"
                                label="性别">
                        </el-table-column>
                        <el-table-column
                                prop="v_tel"
                                label="电话">
                        </el-table-column>
                        <el-table-column
                                prop="v_email"
                                label="邮箱">
                        </el-table-column>

                        <el-table-column
                                prop="v_idcard"
                                label="身份证号">
                        </el-table-column>
                        <el-table-column
                                prop="v_address"
                                label="家庭住址">
                        </el-table-column>
                        <el-table-column
                                prop="v_useracc"
                                label="账号">
                        </el-table-column>
                        <el-table-column
                                prop="v_userpwd"
                                label="密码">
                        </el-table-column>
                        <el-table-column
                                prop="v_position"
                                label="职位">
                        </el-table-column>
                        <el-table-column
                                prop="v_department"
                                label="部门">
                        </el-table-column>
                        <el-table-column
                                prop="v_leader"
                                label="直属领导">
                        </el-table-column>

                        <el-table-column
                                label="操作"
                                width="150px">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="HuanYuan(scope.$index, scope.row)">还原</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        class="btnxg"
                                        @click="ShanChu(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block"><!--这里是分页-->
                        <el-pagination
                                layout="prev, pager, next"
                                :total="dataNum"
                                :page-size="5"
                                :page-count="7"
                                @current-change="changePage">

                            <!--                            :total="dataNum" ===》数据总条数-->
                            <!--                            :page-size="5" ===》每页5条数据-->
                            <!--                            :page-count="7"===》当超过7页的时候，分页显示省略号-->
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="查询员工" name="third">
                    <div id="ssdiv" class="clear">
                        <label for="ssinput" id="sslab">搜索</label>
                        <div id="sspotions">
                            <template>
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>


                        <input type="text" id="ssinput" v-model="ssitem" placeholder="请输入查询的条件">
                        <el-button class="btnqrtj" @click="QRSS" type="text">确认搜索</el-button>
                    </div>
                    <div>
                        <el-table
                                :header-cell-style="header_style"
                                :cell-style="cell_style"
                                :data='sscurrentData'
                                border
                                style="width: 100%;margin: 0 auto;">
                            <el-table-column
                                    prop="v_id"
                                    label="工号">
                            </el-table-column>
                            <el-table-column
                                    prop="v_name"
                                    label="姓名">
                            </el-table-column>
                            <el-table-column
                                    prop="v_src"
                                    label="头像">
                            </el-table-column>
                            <el-table-column
                                    prop="v_sex"
                                    label="性别">
                            </el-table-column>
                            <el-table-column
                                    prop="v_tel"
                                    label="电话">
                            </el-table-column>
                            <el-table-column
                                    prop="v_email"
                                    label="邮箱">
                            </el-table-column>
                            <el-table-column
                                    prop="v_idcard"
                                    label="身份证号">
                            </el-table-column>
                            <el-table-column
                                    prop="v_address"
                                    label="家庭住址">
                            </el-table-column>
                            <el-table-column
                                    prop="v_useracc"
                                    label="账号">
                            </el-table-column>
                            <el-table-column
                                    prop="v_userpwd"
                                    label="密码">
                            </el-table-column>
                            <el-table-column
                                    prop="v_position"
                                    label="职位">
                            </el-table-column>
                            <el-table-column
                                    prop="v_department"
                                    label="部门">
                            </el-table-column>
                            <el-table-column
                                    prop="v_leader"
                                    label="直属领导">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="150px">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini "
                                            type="primary"
                                            @click="ssxiugai(scope.$index, scope.row)"
                                    >修改
                                        <!--                                        @click="handleEdit(scope.$index, scope.row)"-->
                                    </el-button>
                                    <!--================这是点击修改以后弹出的模态框=======================================-->
                                    <el-dialog
                                            title="修改详情"
                                            width="30%"
                                            :before-close="handleClose"
                                            :visible.sync="ssxgdialogVisible">
                                        <label for="ssid" class="xiugailab">工号</label>
                                        <input type="text" id="ssid" class="xiugaiinput" v-model="ssxgitem.id" disabled style="border: 1px solid red">
                                        <label for="ssname" class="xiugailab">姓名</label>
                                        <input type="text" id="ssname" class="xiugaiinput" v-model="ssxgitem.name" >
                                        <label for="sssrc" class="xiugailab">头像</label>
                                        <input type="text" id="sssrc" class="xiugaiinput" v-model="ssxgitem.src" >
                                        <label for="sssex" class="xiugailab">性别</label>
                                        <input type="text" id="sssex" class="xiugaiinput" v-model="ssxgitem.sex" >
                                        <label for="sstel" class="xiugailab">电话</label>
                                        <input type="text" id="sstel" class="xiugaiinput" v-model="ssxgitem.tel" >
                                        <label for="ssemail" class="xiugailab">邮箱</label>
                                        <input type="text" id="ssemail" class="xiugaiinput" v-model="ssxgitem.email" >
                                        <label for="ssidcard" class="xiugailab">身份证号</label>
                                        <input type="text" id="ssidcard" class="xiugaiinput" v-model="ssxgitem.idcard" >
                                        <label for="ssaddress" class="xiugailab">家庭住址</label>
                                        <input type="text" id="ssaddress" class="xiugaiinput" v-model="ssxgitem.address">
                                        <label for="ssuseracc" class="xiugailab">账号</label>
                                        <input type="text" id="ssuseracc" class="xiugaiinput" v-model="ssxgitem.useracc" disabled style="border: 1px solid red">
                                        <label for="ssuserpwd" class="xiugailab">密码</label>
                                        <input type="text" id="ssuserpwd" class="xiugaiinput" v-model="ssxgitem.userpwd" >
                                        <label for="ssposition" class="xiugailab">职位</label>
                                        <input type="text" id="ssposition" class="xiugaiinput" v-model="ssxgitem.position" >
                                        <label for="ssdepartment" class="xiugailab">部门</label>
                                        <input type="text" id="ssdepartment" class="xiugaiinput" v-model="ssxgitem.department" >
                                        <div style="text-align: left;margin-left: 3px">
                                            <label for="Leader" class="xiugailab">直属领导</label>
                                            <input type="text" class="xiugaiinput" id="Leader" v-model="ssxgitem.leader" >
                                        </div>
                                        <span slot="footer" class="dialog-footer">
                                    <el-button @click="ssxgdialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="ssQRXG">确认修改</el-button>
                                    </span>
                                    </el-dialog>
                                    <!--================这是点击修改以后弹出的模态框=======================================-->

                                    <el-button
                                            size="mini"
                                            class="btnxg"
                                            type="danger">删除
                                    </el-button>


                                    <!--                    @click="handleDelete(scope.$index, scope.row)"-->
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block"><!--这里是分页-->
                            <el-pagination
                                    layout="prev, pager, next"
                                    :total="sousuoData.length"
                                    :page-size="5"
                                    :page-count="7"
                                    @current-change="sschangePage">

                                <!--                            :total="dataNum" ===》数据总条数-->
                                <!--                            :page-size="5" ===》每页5条数据-->
                                <!--                            :page-count="7"===》当超过7页的时候，分页显示省略号-->
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

<script>

    import {mapActions, mapState} from 'vuex'
    import axios from '../../http/http'
    import * as api from '../../http/api'

    export default {
        name: "mxl_hsz",
        computed: {
            currentData() {//当前页需要的数据
                let kaishi = (this.currentPage - 1) * 5;
                let jieshu = (this.currentPage - 1) * 5 + 5;
                return this.dangqianyeData = this.newdata.slice(kaishi, jieshu)
            },
            dataNum() {//数据总条数
                return  this.newdata.length
            },
            sscurrentData() {
                //console.log(1)
                let kaishi = (this.currentPage - 1) * 5;
                let jieshu = (this.currentPage - 1) * 5 + 5;
                //console.log(this.totalData)
                return this.ssdangqianyeData = this.sousuoData.slice(kaishi, jieshu)
            },
        },
        data() {
            return {
                activeName: 'first',//设置这个是为了点击导航栏基本信息以后会自动跳转到第一个选项卡来
                currentPage: 1,//当前页
                dialogVisible: false,//模态框设置为隐藏
                item: {
                    id: '',
                    name: '',
                    src: '',
                    tel: '',
                    email: '',
                    sex: '',
                    idcard: '',
                    address: '',
                    useracc: '',
                    userpwd: '',
                    position: '',
                    department: '',
                    leader: '',
                },//当点击修改按钮后，出现模态框，让本来表单里面的数据赋值到这里data数据里面，在把这里的数据传到input框中，显示出来。与handleEdit函数联系
                dataIndex: '',
                dangqianyeData: '',
                newdata:[],//这是传过来的总数据
                //======搜索员工===========
                ssitem: '',
                sousuoData: [],
                options: [
                    {
                        value: '1',
                        label: '工号',

                    },
                    {
                        value: '2',
                        label: '姓名',
                    },
                    {
                        value: '3',
                        label: '电话',

                    },
                    {
                        value: '4',
                        label: '身份证号'
                    },
                    {
                        value: '5',
                        label: '账号'
                    },
                    {
                        value: '6',
                        label: '职位'
                    }
                ],
                value: '1',
                ssxgdialogVisible:false,
                ssxgitem: {//这是搜索出来数据以后，点击修改绑定的v-model
                    id: '',
                    name: '',
                    src: '',
                    sex: '',
                    tel: '',
                    email: '',
                    idcard: '',
                    address: '',
                    useracc: '',
                    userpwd: '',
                    position: '',
                    department: '',
                    leader: '',
                },
                ssdangqianyeData:[],
                ssdataIndex: '',//搜索数据页面 当前页五条数据的下标
            }
        },
        methods: {
            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },
            handleClick() {//element组件的属性
            },
            ...mapActions(['Userdata'],),
            changePage(val) {
                this.currentPage = val
            },
            //点击还原，展示内容
            handleClose(done) {

            },
            //点击删除，展示内容
            HuanYuan(index, item) {//当点击修改按钮的函数。。。。修改框的表单拿到当前值
                // this.$confirm('此操作将还原文件, 是否继续?', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'info'
                // }).then(() => {

                    console.log(item)
                    axios({
                        url:api.RETURNDATA,
                        method:'post',
                        data:{id:item.v_id},
                    }).then(res=>{
                        console.log(res)
                        this.newdata=res.data.res
                    })
                //     this.$message({
                //         type: 'success',
                //         message: '还原成功!'
                //     });
                // }).catch(() => {
                //     this.$message({
                //         type: 'info',
                //         message: '已取消删除'
                //     });
                // });
                console.log(index)//代表下标
                //console.log(item)//代表每一项item
                return this.dataIndex = index

            },
            ShanChu(index, item) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(item)
                    axios({
                        url:api.RELDEL,
                        method: 'post',
                        data:{id:item.v_id}
                    }).then(res=>{
                        console.log(res)
                        if(res.status===200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            console.log(this.newdata);
                            let newArr=this.newdata.filter(i => {
                                //console.log(i)
                                return !(i.v_id === res.data.reldelDataid)
                            })
                            this.newdata=newArr
                            console.log(this.newdata)
                        }else{
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //==================================搜索员工====================================
            QRSS() {
                //console.log(this.ssitem)
                //console.log(this.options)
                if (this.ssitem !== '') {
                    //console.log(this.value);
                    if (parseInt(this.value) === 1) {
                        axios({
                            url: api.SSHSZDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            // console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        });
                    } else if (parseInt(this.value) === 2) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    } else if (parseInt(this.value) === 3) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    }else if (parseInt(this.value) === 4) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    }else if (parseInt(this.value) === 5) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    }else if (parseInt(this.value) === 6) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    }
                } else {
                    this.$alert('请输入查询条件', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            //搜索完毕以后，出现数据上面的修改btn
            ssxiugai(index, item){
                this.ssxgdialogVisible=true
                console.log(item);
                this.ssxgitem.id = item.v_id;//a.将那条数据的所有字段信息，用data里面的item装一下，用到上面的input框里面
                this.ssxgitem.name = item.v_name;
                this.ssxgitem.src = item.v_src;
                this.ssxgitem.sex = item.v_sex;
                this.ssxgitem.tel = item.v_tel;
                this.ssxgitem.email = item.v_email;
                this.ssxgitem.idcard = item.v_idcard;
                this.ssxgitem.address = item.v_address;
                this.ssxgitem.useracc = item.v_useracc;
                this.ssxgitem.userpwd = item.v_userpwd;
                this.ssxgitem.position = item.v_position;
                this.ssxgitem.department = item.v_department;
                this.ssxgitem.leader = item.v_leader;
                return this.ssdataIndex = index//将那条数据的下标返回出去，用ssdataIndex装一下，用到下面的ssQRXG函数
            },
            ssQRXG() {
                this.ssxgdialogVisible = false;//当点击确认修改按钮的时候。模态框消失。
                console.log(this.item)//b.因为v-model是双向的，所以当input框里面的东西改变，这里打印this.item，也自然而然会改变
                axios({
                    url: api.CHANGEDATA,
                    method: 'post',
                    data: {
                        id: this.ssxgitem.id,
                        name: this.ssxgitem.name,
                        src: this.ssxgitem.src,
                        sex: this.ssxgitem.sex,
                        tel: this.ssxgitem.tel,
                        email: this.ssxgitem.email,
                        idcard: this.ssxgitem.idcard,
                        address: this.ssxgitem.address,
                        useracc: this.ssxgitem.useracc,
                        userpwd: this.ssxgitem.userpwd,
                        position: this.ssxgitem.position,
                        department: this.ssxgitem.department,
                        leader: this.ssxgitem.leader,
                    },
                }).then(res => {
                    console.log(res)//这里拿到后台返回的数据
                    if (res.status === 200) {
                        //console.log(this.sousuoData)//当前页数据的第几条
                        console.log(this.ssdangqianyeData)
                        console.log(this.ssdangqianyeData[this.ssdataIndex])
                        console.log(this.ssxgitem)
                        this.ssdangqianyeData[this.ssdataIndex] = Object.assign({}, this.ssdangqianyeData[this.ssdataIndex], {
                            v_name: this.ssxgitem.name,
                            v_src: this.ssxgitem.src,
                            v_sex: this.ssxgitem.sex,
                            v_tel: this.ssxgitem.tel,
                            v_email: this.ssxgitem.email,
                            v_idcard: this.ssxgitem.idcard,
                            v_address: this.ssxgitem.address,
                            v_userpwd: this.ssxgitem.userpwd,
                            v_position: this.ssxgitem.position,
                            v_department: this.ssxgitem.department,
                            v_leader: this.ssxgitem.leader,
                        })
                    }
                }).catch(err => {

                })
            },
            sschangePage(val) {
                //console.log(val)//代表分页的页码的数字   如：第五页就是5
                this.currentPage = val
                // console.log(this.totalData)
                let kaishi = (val - 1) * 5;
                let jieshu = (val - 1) * 5 + 5;
                // console.log(this.totalData)
                return this.ssdangqianyeData = this.sousuoData.slice(kaishi, jieshu)
            },
        },
        created() {
            // this.Userdata().then(res=>{
            //     console.log(res)
            // //     this.currentData=res.data.data
            // });

            //console.log(this.$store)
            // this.newdata=this.$store.state.mxl_jbxx.receiveDelData//这是传过来的总数据
            // console.log(this.newdata)
            axios({
                url:api.HSZDATA,
                method: 'post',
            }).then(res=>{
                console.log(res)
                this.newdata=res.data.res
            })
        }
    }
</script>

<style scoped>
    /*基本信息选项卡*/
    .btnxg{
        margin-left:5px;
    }
    .xiugailab {
        font-size: 20px;
        margin-left: 10px;
        display: inline-block;
        width: 80px;
        /*border: 1px solid red;*/
        text-align: left;

    }
    .xiugaiinput {
        width: 160px;
        margin: 5px;
        height: 20px;
        outline: none;
        /*border: 1px solid red;*/
    }
    /*查询员工选项卡*/
    .clear {
        content: '';
        display: block;
        clear: both;
    }

    #sslab {
        display: inline-block;
        width: 100px;
        height: 40px;
        line-height: 40px;
        float: left;
        font-size: 20px;
        text-align: center;
        margin-left: 280px;
        /*border: 1px solid red;*/
        background-color: #F0696D;
        color: white;
        border-radius: 3px;
        margin-bottom: 20px;
    }

    #ssinput {
        width: 500px;
        height: 37px;
        outline: none;
        border: 1px solid #DCDFE6;
        float: left;
        border-radius: 5px;

    }

    #sspotions {
        margin-left: 180px;
        float: left;
        width: 100px;
    }

    input::-webkit-input-placeholder {
        font-size: 16px;
    }
    .btnqrtj {
        width: 100px;
        background-color: #F0696D;
        /*border: 1px solid red;*/
        color: white;
        font-size: 20px;
        padding: 10px;
        cursor: pointer;

    }



</style>